<!--
 * @Author: your name
 * @Date: 2020-01-01 13:21:10
 * @LastEditTime : 2020-01-08 10:40:51
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuehr\src\views\earnestmoney\earnestmoneySklx.vue
 -->
<template>
  <div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="代码">
          <el-input v-model="formInline.code" placeholder="请输入姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="formInline.name" placeholder="请输入姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.status" placeholder="请选择" clearable>
            <el-option label="停用" value="2"></el-option>
            <el-option label="启用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align:right;margin-bottom:20px;">
      <el-button type="success" @click="add">新增</el-button>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status == '1'"
              @click="handleClick(scope.row)"
              type="text"
              size="small"
            >停用</el-button>
            <el-button
              v-if="scope.row.status == '2'||scope.row.status == '0'"
              @click="handleClick(scope.row)"
              type="text"
              size="small"
            >启用</el-button>
            <el-button
              type="text"
              v-if="scope.row.status == '2'||scope.row.status == '0'"
              size="small"
              @click="edit(scope.row)"
            >编辑</el-button>
            <el-button
              type="text"
              v-if="scope.row.status == '2'||scope.row.status == '0'"
              size="small"
              @click="delect(scope.row.code)"
            >删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="代码"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="status" label="状态" cl>
          <template slot-scope="scope">
            <span v-if="scope.row.status == '0'">初始</span>
            <span v-if="scope.row.status == '1'">启用</span>
            <span v-if="scope.row.status == '2'">停用</span>
          </template>
        </el-table-column>
        
      </el-table>
      <div style="display: flex;justify-content: flex-end">
        <el-pagination
          background
          @size-change="sizeChange"
          @current-change="currentChange"
          layout="sizes, prev, pager, next, jumper, ->, total, slot"
          :total="formInline.total"
        ></el-pagination>
      </div>
    </div>
    <add-order ref="addOrder" v-if="addOrderVisible" :visible.sync="addOrderVisible"></add-order>
    <edit-order ref="editOrder" v-if="editOrderVisible" :editdata='editdata' :visible.sync="editOrderVisible"></edit-order>
  </div>
</template>

<script>
import Add from "./dhhadd.vue";
import Edit from "./dhhEdit.vue";
import { debounce } from "@/utils/sunny"
export default {
  data() {
    return {
      debounce:debounce,
      addOrderVisible: false,
      editOrderVisible: false,
      user: JSON.parse(window.sessionStorage.getItem("user")),
      editdata:'',
      formInline: {
        code: "",
        name: "",
        status: "",
        total: 0,
        page: 1,
        size: 10
      },
      tableData: []
    };
  },
  methods: {
    add(refForm) {
      if (this.$refs[refForm]) {
        this.$refs[refForm].initForm();
      }
      this.addOrderVisible = true;
    },
    edit(row,refForm){
        if (this.$refs[refForm]) {
        this.$refs[refForm].initForm();
      }
      this.editdata = row
      this.editOrderVisible = true;
    },
    onSubmit() {
      this.getdata();
    },
    handleClick:debounce(function(row){
      // 启用的时候修改 qyr  停用的时候修改 tyr
      let url = "";
      if (row.status == "2" || row.status == "0") {
        row.qyr = this.user.name;
        url = "/earnestmoney/dhh/enable";
      } else if (row.status == "1") {
        row.tyr = this.user.name;
        url = "/earnestmoney/dhh/disable";
      }
      this.postRequest(url, row).then(res => {
        if (res.status == "200") {
          this.getdata();
        }
      });
    }),
    getdata() {
      this.getRequest("/earnestmoney/dhh/query?code="+this.formInline.code+'&name='+this.formInline.name+'&status='+this.formInline.status+'&page='+this.formInline.page+'&size='+this.formInline.size).then(res => {
        console.log(res, "2222");
        if (res) {
          this.tableData = res.data;
          this.formInline.total = res.total;
        }
      });
    },
      delect:debounce(function(e){
        this.deleteRequest('/earnestmoney/dhh/delete/'+e).then(res =>{
             if (res.status == "200") {
                this.getdata();
                }
        })
    }),
    sizeChange(size) {
      this.formInline.size = size;
      this.getdata();
    },
    currentChange(page) {
      this.formInline.page = page;
      this.getdata();
    }
  },
  created() {
    this.getdata();
  },
  components: {
    "add-order": Add,
     "edit-order": Edit
  }
};
</script>

<style>
</style>